<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="8">
        <el-card shadow="never" header="脉冲圆点">
          <el-space wrap :size="15">
            <my-status-indicator pulse type="primary"></my-status-indicator>
            <my-status-indicator pulse type="success"></my-status-indicator>
            <my-status-indicator pulse type="warning"></my-status-indicator>
            <my-status-indicator pulse type="danger"></my-status-indicator>
            <my-status-indicator type="info"></my-status-indicator>
          </el-space>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never" header="趋势">
          <el-space wrap :size="15">
            <my-trend v-model="trendValue" prefix="¥"></my-trend>
            <my-trend v-model="trendValue2"></my-trend>
            <my-trend v-model="trendValue3" suffix="%"></my-trend>
          </el-space>
          <p style="margin-top: 15px; color: #999">设置reverse可反转颜色。</p>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <div class="up">
            <h2>持续更新中...</h2>
            <p>原子组件</p>
            <p>原子组件库位置：@/components/Mini/*</p>
            <el-button type="primary" text @click="handler">点击弹窗</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :lg="8">
        <el-card shadow="never">
          <my-statistic
            title="今日收益额度"
            value="1897.45"
            description="我是更详细的文本描述"
            tips="我是提示！！！"
            groupSeparator
          ></my-statistic>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <my-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
            <my-trend v-model="profit"></my-trend>
          </my-statistic>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <my-statistic title="留言" value="12345" suffix="条" groupSeparator>
            <my-trend v-model="message"></my-trend>
          </my-statistic>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup lang="ts">
import MyStatistic from '@/components/Statistic/index.vue'
import MyTrend from '@/components/Mini/Trend.vue'
import MyStatusIndicator from '@/components/Mini/StatusIndicator.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const trendValue = ref(4.6)
const trendValue2 = ref(0)
const trendValue3 = ref(-3.2)
const profit = ref(112893)
const message = ref(12345)

const handler = () => {
  ElMessage.success('我是弹窗')
}
</script>

<style lang="scss" scoped>
.up {
  text-align: center;
  h2 {
    margin-bottom: 10px;
  }
  p {
    color: #999;
    line-height: 1.5;
  }
}
.el-card {
  height: 150px;
}
</style>
